<!--
 * @Description: 
 * @Date: 2023-02-27 10:53:27
 * @LastEditors: czp
 * @LastEditTime: 2023-03-10 16:36:58
-->
<template>
	<DetailHeader v-model:active-index="categoryIndex" :nav="nav" />
	<BaseCrumb v-model:active-key="activeKey" :category-index="categoryIndex" :nav="nav"></BaseCrumb>
	<component :is="mapComp[activeKey]" />
	<BaseFooter></BaseFooter>
</template>
<script setup lang="ts" name="XiangSuDetail">
import DetailHeader from "~V/components/DetailHeader/index.vue";
import BaseCrumb from "~V/components/BaseCrumb/index.vue";
import { useBaseStore } from "@/store/base";
import { useComponents } from "@/hook/useComponents";

const $route = useRoute();
const { getMenuByPath } = useBaseStore();
const nav = getMenuByPath("/xiang-su/index");
const categoryIndex = ref(0);
const activeKey = ref();
watchEffect(() => {
	categoryIndex.value = Number($route.query?.categoryIndex ?? 0);
});
watchEffect(() => {
	activeKey.value = nav.children[categoryIndex.value].key;
});
watch(
	() => $route.query.key,
	() => {
		activeKey.value = ($route.query.key as string) ?? nav.children[categoryIndex.value].key;
	},
	{ flush: "post" }
);

const compNames = ["JiuDian", "MinSu2", "NongJiaLe", "MSDiTu", "MSGongLue", "MSYuDing"];
const mapComp = useComponents(compNames, "xiang-su");
</script>
<style lang="scss" scoped>
.img {
	width: 100%;
	height: 100%;
}
</style>
